<style lang="scss" scoped>
.login_wrap {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("@/assets/login/login_bac.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .login_form_wrap {
    width: 300px;
    padding: 40px 40px 20px;
    border: 3px solid #06689f;
    position: relative;
    .border_item {
      position: absolute;
      &::after {
        content: "";
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border-width: 3px 3px 3px 3px;
        border-style: solid;
      }
      &.top_top_left {
        width: 36px;
        height: 6px;
        background: #01e1eb;
        top: -3px;
        left: -3px;
        &::after {
          right: -6px;
          top: 0;
          border-color: #01e1eb transparent transparent #01e1eb;
        }
      }
      &.top_top_right {
        width: 36px;
        height: 6px;
        background: #0aa1f8;
        top: -3px;
        right: -3px;
        &::after {
          left: -6px;
          top: 0;
          border-color: #0aa1f8 #0aa1f8 transparent transparent;
        }
      }
      &.top_left_left {
        width: 6px;
        height: 36px;
        background: #01e1eb;
        top: -3px;
        left: -3px;
        &::after {
          left: 0;
          top: 100%;
          border-color: #01e1eb transparent transparent #01e1eb;
        }
      }
      &.top_right_right {
        width: 6px;
        height: 36px;
        background: #0aa1f8;
        top: -3px;
        right: -3px;
        &::after {
          left: 0;
          top: 100%;
          border-color: #0aa1f8 #0aa1f8 transparent transparent;
        }
      }

      &.bot_bot_left {
        width: 36px;
        height: 6px;
        background: #0aa1f8;
        bottom: -3px;
        left: -3px;
        &::after {
          left: 100%;
          top: 0;
          border-color: transparent transparent #0aa1f8 #0aa1f8;
        }
      }
      &.bot_bot_right {
        width: 36px;
        height: 6px;
        background: #01e1eb;
        bottom: -3px;
        right: -3px;
        &::after {
          left: -6px;
          top: 0;
          border-color: transparent #01e1eb #01e1eb transparent;
        }
      }
      &.bot_left_left {
        width: 6px;
        height: 36px;
        background: #0aa1f8;
        bottom: -3px;
        left: -3px;
        &::after {
          left: 0;
          top: -6px;
          border-color: transparent transparent #0aa1f8 #0aa1f8;
        }
      }
      &.bot_right_right {
        width: 6px;
        height: 36px;
        background: #01e1eb;
        bottom: -3px;
        right: -3px;
        &::after {
          left: 0;
          top: -6px;
          border-color: transparent #01e1eb #01e1eb transparent;
        }
      }
    }
    .login_tit {
      font-weight: 800;
      font-size: 22px;
      color: #01e1ea;
      padding-bottom: 20px;
      text-align: center;
    }
    .login_btn {
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #01e1ea;
      font-size: 16px;
      color: #333;
      border-radius: 2px;
      cursor: pointer;
    }
    .login_desc {
      color: #ffffff;
      margin-top: 10px;
      font-size: 12px;
      cursor: pointer;
    }
    .login_form {
      .slot_img {
        width: 20px;
        height: 20px;
      }
      --el-border-color: #036aa3;
      --el-border-width: 2px;
      --el-input-text-color: #fff;
      --el-checkbox-bg-color: #036aa3;
      --el-border-color-hover: #036aa3; 
      ::v-deep(.el-input__wrapper) {
        background: #03446b !important;
        border-color:#036aa3 ;
        border-width: 2px !important;
      }
    }
    .check_box {
      position: relative;
      top: -10px;
      .text {
        color: #c2b5b7;
      }
      ::v-deep(.el-checkbox__inner) {
        background-color: #03446b !important;
        border-color:#036aa3 ;
      }
    }
  }
  .beian {
    position: absolute;
    color: #ffffff;
    bottom: 4%;
    font-size: 12px;
  }
}
</style>

<template>
  <div class="login_wrap">
    <div class="login_form_wrap">
      <div class="border_item top_top_left"></div>
      <div class="border_item top_top_right"></div>

      <div class="border_item top_left_left"></div>
      <div class="border_item top_right_right"></div>

      <div class="border_item bot_bot_left"></div>
      <div class="border_item bot_bot_right"></div>

      <div class="border_item bot_left_left"></div>
      <div class="border_item bot_right_right"></div>
      <div class="login_tit">昭牛BI数据分析系统</div>
      <div class="login_form">
        <el-form :rules="rules" ref="formRef" label-width="0" :model="loginForm">
          <el-form-item prop="username">
            <el-input :input-style="{ color: '#ffffff' }" size="large" placeholder="请输入用户名" v-model="loginForm.username" >
              <template #prefix>
                <img class="slot_img" style="width: 22px; height: 22px" src="@/assets/login/user.png" alt="">
              </template>
              
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input :input-style="{ color: '#ffffff' }" size="large" type="password" placeholder="请输入密码" v-model="loginForm.password" >
              <template #prefix>
                <img class="slot_img" src="@/assets/login/lock.png" alt="">
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="check_box">
          <el-checkbox v-model="rember"><span class="text">记住密码</span></el-checkbox>
        </div>
        
      </div>
      <div @click="search" class="login_btn">登录</div>
      <div class="login_desc">如遇问题请联系管理员</div>
    </div>
    <div class="beian">{{ pageConfig.web_record }}</div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import useForm from '@/hooks/useForm'
import useRember from '@/hooks/useRember'
import { Login } from '@/apis/login'
import { useRouter } from 'vue-router'
import { userStore } from '@/store/user.js'
import { userStore as useMenuStore } from '@/store/menu.js'
import { GetRoleModuleById } from "@/apis/role";
import { deepFilter } from '@/utils/index.js'
import { GetConfigList } from '@/apis/system'
const store = userStore()
const menuStore = useMenuStore()
const router = useRouter()
const loginForm = reactive({
  password: 'zh102030',
  username: 'admin',
});
const pageConfig = reactive({})
// 是否记住密码
const { rember, setLoginInfo } = useRember(loginForm)

const isLogining = ref(false)
// 登陆
const handleLogin = async () => {
  if (isLogining.value) return 
  isLogining.value = true
  try {
    const res = await Login(loginForm)
    store.setToken(res.token)
    store.setUserInfo({ ...res })
    // 存储账号密码
    setLoginInfo(rember.value ? loginForm : '')
    GetRoleModuleById(res.rid).then(menu => {
        let { checkedIds = [], list } = menu
        // 菜单过滤
        list = deepFilter(list, item => checkedIds.includes(item.mid))
        console.log('list: ', list);
        menuStore.setMenuList(list)
        window.localStorage.setItem('BI_Menu', JSON.stringify(list))
        // 跳转到首页
        router.replace({
          path: '/bulletin-board'
        })
    })
    
  } catch (error) {
    console.log(error)
  }
  isLogining.value = false
}
const { search, formRef } = useForm( handleLogin )
const rules = {
  username: [
    { required: true, message: '请输入用户名' }
  ],
  password: [
    { required: true, message: '请输入密码' }
  ]
}

onMounted(async () => {
  const systemConfig = await GetConfigList()
  const configMap = (systemConfig || []).reduce((pre, cur) => {
    pre[cur.configName] = cur.configValue
    return pre
  }, {})
  Object.assign(pageConfig, { ...configMap })
  store.setConfig(configMap)
})
</script>